<template>
  <div>
    <top-bar backShow="true" title="出入金记录" titleShow="true"></top-bar>
    <div class="content flowrecord">
      <div class="flowrecord-top clearfix">
        <!-- <div class="pull-left">全部</div>
        <div class="pull-right">今天</div> -->
        <select class="pull-left">
          <option value ="volvo">全部</option>
          <option value ="saab">入金</option>
          <option value="opel">出金</option>
        </select>
        <select class="pull-right">
          <option value ="volvo">全部</option>
          <option value ="saab">今天</option>
          <option value="opel">上一周</option>
          <option value="opel">上个月</option>
          <option value="opel">最近3个月</option>
          <option value="opel">自定义周期</option>
        </select>
      </div>
      起始日期：<input type="text" id="demo_date_begin"/><br><br>
      截止日期：<input type="text" id="demo_date_end"/>
      <dl class="clearfix">
        <dt>
          6月
        </dt>
        <dd class="flex-1 clearfix">
          <div class="left">
            <p>入金</p>
            <p>8.28 15:40</p>
          </div>
          <div class="right">$1221.02</div>
        </dd>
        <dd class="flex-1 clearfix">
          <div class="left">
            <p>入金</p>
            <p>8.28 15:40</p>
          </div>
          <div class="right">$1221.02</div>
        </dd>
        <dd class="flex-1 clearfix">
          <div class="left">
            <p>入金</p>
            <p>8.28 15:40</p>
          </div>
          <div class="right">$1221.02</div>
        </dd>
      </dl>
      <dl class="clearfix">
        <dt>
          5月
        </dt>
        <dd class="flex-1 clearfix">
          <div class="left">
            <p>入金</p>
            <p>8.28 15:40</p>
          </div>
          <div class="right">$1221.02</div>
        </dd>
        <dd class="flex-1 clearfix">
          <div class="left">
            <p>入金</p>
            <p>8.28 15:40</p>
          </div>
          <div class="right">$1221.02</div>
        </dd>
        <dd class="flex-1 clearfix">
          <div class="left">
            <p>入金</p>
            <p>8.28 15:40</p>
          </div>
          <div class="right">$1221.02</div>
        </dd>
      </dl>
    </div>
  </div>
</template>
<script>
  import topBar from '../../components/topBar/topBar.vue';
  import '../../config/zepto.min.js';
  import '../../config/mobiscroll.min.js';
  import '../../config/mobiscroll.datetime.min.js';


  export default {
    data() {
      return {}
    },
    components: {
      topBar
    },
    mounted(){
      $('#demo_date_begin').mobiscroll().date({
                defaultValue: new Date(2011, 7, 8),   //默认显示日期2011年8月8日
                minDate: new Date(2010, 7, 14),       //最小日期2010年8月14日
                maxDate: new Date(),       //最大日期2017年8月14日
                invalid: [
                    //'1/1',                            //1月1日禁用
                    //'12/24',                          //12月24日禁用
                    //'w0',                             //星期日禁用
                    //'w3',                             //星期三禁用
                    //new Date(2014, 10, 3),            //2014年11月3日禁用
                    //new Date(2016, 9, 11),            //2016年10月11日禁用
                    //{start: new Date(2014, 0, 27), end: new Date(2014, 2, 15)}   //2014年1月27日到2014年3月15日禁用
                ],
                dateFormat: 'yy/mm/dd',               //输入框中显示日期格式
                dateOrder: 'yymmdd',                  //日期弹出框中显示日期
                onChange: function (valueText) {      //日期滑动改变的时候
                    console.log(valueText)
                },
                onSelect: function (valueText) {      //日期选定的时候
                    console.log(valueText)
                }
            });
      $('#demo_date_end').mobiscroll().date({
                defaultValue: new Date(2011, 7, 8),   //默认显示日期2011年8月8日
                minDate: new Date(2010, 7, 14),       //最小日期2010年8月14日
                maxDate: new Date(),       //最大日期2017年8月14日
                invalid: [
                    //'1/1',                            //1月1日禁用
                    //'12/24',                          //12月24日禁用
                    //'w0',                             //星期日禁用
                    //'w3',                             //星期三禁用
                    //new Date(2014, 10, 3),            //2014年11月3日禁用
                    //new Date(2016, 9, 11),            //2016年10月11日禁用
                    //{start: new Date(2014, 0, 27), end: new Date(2014, 2, 15)}   //2014年1月27日到2014年3月15日禁用
                ],
                dateFormat: 'yy/mm/dd',               //输入框中显示日期格式
                dateOrder: 'yymmdd',                  //日期弹出框中显示日期
                onChange: function (valueText) {      //日期滑动改变的时候
                    console.log(valueText)
                },
                onSelect: function (valueText) {      //日期选定的时候
                    console.log(valueText)
                }
            });
    }
  }




</script>

<style>
  @import '../../style/mobiscroll.css';
</style>
<style scoped>
.content.flowrecord {
  font-size: .16rem;
  color: #6a747f;
}
.flowrecord-top {
  padding: .103333rem .61rem;
  background: rgba(40, 47, 55, 1);
}
.flowrecord-top select {
  padding: .04rem .2rem;
  color: #6a747f;
  min-width: .84rem;
  font-size: .14rem;
  height: .213333rem;
  border-radius: .04rem;
  background: rgba(34, 39, 45, 1);
}
.flowrecord-top select option {
  text-indent: .2rem;
}
dl dt, dl dd {
  padding: 0 .18rem;
}
dl dt {
  line-height: .54rem;
  height: .54rem;
}
dl dd {
  overflow: hidden;
  height: .83rem;
  background: rgba(45, 52, 61, 1);
  border-top: .01rem solid rgba(51, 58, 66, 1);
}
dl dd:nth-child(2n) {
  background: rgba(40, 47, 55, 1);
}
dl dd .left {
  float: left;
  padding: .19666rem 0;
}
dl dd .left p:nth-child(1) {
  color: #fff;
  font-size: .16rem;
}
dl dd .left p:nth-child(2) {
  padding-top: .18rem;
  font-size: .14rem;
}
dl dd .right {
  float: right;
  line-height: .83rem;
}
</style>
